    $(function(){
        //接收类别
        $('.category-image').on("click",function () {
            var type = $('#type').val(),
                typeName = $('#typeName').val(),
                url2 = '/client/productType',
                data2 = {type:type,typeName:typeName};
            console.log(data2);
            ajax(url2,data2,false);

        });
    });

        //公共ajax
        function ajax(url,data,async){
            $.ajax({url:url,data:data,type:"GET",async:async,
                success:function(res){
                    var obj = eval("("+res+")");console.log(obj);
                    if(obj.error == 0){
                        var container = $('.waterfull ul');
                        var loading=$('#imloading');
                        // 初始化loading状态
                        loading.data("on",true);
                        /*判断瀑布流最大布局宽度，最大为1280*/
                        function tores(){
                            var tmpWid=$(window).width();
                            if(tmpWid>1280){
                                tmpWid=1280;
                            }else{
                                var column=Math.floor(tmpWid/320);
                                tmpWid=column*320;
                            }
                            $('.waterfull').width(tmpWid);
                        }
                        tores();
                        $(window).resize(function(){
                            tores();
                        });
                        container.imagesLoaded(function(){
                            container.masonry({
                                columnWidth: 320,
                                itemSelector : '.item',
                                isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
                                isAnimated: true,//是否采用jquery动画进行重拍版
                                isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
                                isResizable: true,//是否自动布局默认true
                                animationOptions: {
                                    duration: 800,
                                    easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
                                    queue: false//是否队列，从一点填充瀑布流
                                }
                            });
                        });
                        //
                        var sqlJson=obj.list;
                        $(window).scroll(function(){
                            if(!loading.data("on")) return;
                            // 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
                            var itemNum=$('#waterfull').find('.item').length;
                            var itemArr=[];
                            itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                            itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                            itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                            var maxTop=Math.max.apply(null,itemArr);
                            if(maxTop<$(window).height()+$(document).scrollTop()){
                                //加载更多数据
                                loading.data("on",false).fadeIn(800);
                                (function(sqlJson){
                                    /*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/
                                    if(itemNum>30){
                                        loading.text('就有这么多了！');
                                    }else{
                                        var html="";
                                        for(var i in sqlJson){
                                            //alert(i);
                                            html+="<li class='item'><a onclick='layer.open({type: 2,area: [\'740px\', \'950px\'],skin: \'layui-layer-rim\',content: ['/client/productDetails/'+sqlJson[i].id ']}' class='a-img'><img src='productImg/"+sqlJson[i].picture+"'></a>";
                                            html+="<div class='choose'><div class='like'><img src='/client/image/star.png'><p>"+sqlJson[i].num_c+"</p></div><div class='collect'><img src=''/client/image/heart_b.png'><p>"+sqlJson[i].num_love+"</p></div>"
                                            html+="<h2 class='li-title'>"+sqlJson[i].name+"</h2>";
                                            html+="<p class='description'>"+sqlJson[i].brief+"</p><div class='qianm clearfloat'>";
                                            html+="<div class='user-block'><div class='user' ><img style='border-radius:50%' src='productImg/"+sqlJson[i].picture+"'></div></div><div class='user-introduction'> "
                                            html+="<div class='user-name'>"+sqlJson[i].nameeeee+"</div><div class='user-skill'>"+sqlJson[i].innnnn+"</div> </div></div></li>";
                                        }
                                        /*模拟ajax请求数据时延时800毫秒*/
                                        var time=setTimeout(function(){
                                            $(html).find('img').each(function(index){
                                                loadImage($(this).attr('src'));
                                            });
                                            var $newElems = $(html).css({ opacity: 0}).appendTo(container);
                                            $newElems.imagesLoaded(function(){
                                                $newElems.animate({ opacity: 1},800);
                                                container.masonry( 'appended', $newElems,true);
                                                loading.data("on",true).fadeOut();
                                                clearTimeout(time);
                                            });
                                        },800)
                                    }
                                })(sqlJson);
                            }
                        });
                        //
                        function loadImage(url) {
                            var img = new Image();
                            //创建一个Image对象，实现图片的预下载
                            img.src = url;
                            if (img.complete) {
                                return img.src;
                            }
                            img.onload = function () {
                                return img.src;
                            };
                        };
                        loadImage('images/one.jpeg');
                        /*item hover效果*/
                        var rbgB=['#eeeeee'];
                        $('#waterfull').on('mouseover','.item',function(){
                            var random=Math.floor(Math.random() *1);
                            $(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
                        });
                        $('#waterfull').on('mouseout','.item',function(){
                            $(this).stop(true).animate({'backgroundColor':'#fff'},1000);
                        });
                    }else{
                        alert(obj.msg);
                    }
                },
                error:function(e){
                    alert("ERROR1!");
                }
            });
        }


